<script setup lang="ts">
import * as echarts from 'echarts';
import {Ref, ref} from "vue";
import {onMounted} from "vue";
import {taskStatistics} from "@/api/platform";
import {EChartsType} from "echarts";
import {AssignedAndReportedCount} from "@/views/platform/platformType";

let statisticsChart: EChartsType;

let currentTimeDimension: Ref<string> = ref('month')

async function drawChart(timeDimension: string){
  currentTimeDimension.value = timeDimension;
  const response = await taskStatistics({
    type: timeDimension
  });
  const times:string[] = [], assignedCountList: number[] = [], reportedCountList: number[] = [];
  response.data.forEach((item: AssignedAndReportedCount) => {
    times.push(item.sjsj);
    assignedCountList.push(item.rwxf);
    reportedCountList.push(item.zdsb);
  });
  statisticsChart.setOption({
    legend: {
      data: ['任务下发', '主动上报'],
      left: 5
    },
    xAxis: {
      data: [...times]
    },
    yAxis: {},
    series: [
      {
        name: '任务下发',
        type: 'bar',
        data: [...assignedCountList]
      },
      {
        name: '主动上报',
        type: 'bar',
        data: [...reportedCountList]
      }
    ]
  });
}

onMounted(async () => {
  let chartDom: HTMLElement | null = document.getElementById('platform-task-statistics-chart');
  if(!chartDom){
    return;
  }
  statisticsChart = echarts.init(chartDom);
  await drawChart('month')
});
</script>

<template>
  <div class="component-wrap">
    <div class="component-title">
      <div class="title-text">任务下发和主动上报统计</div>
    </div>
    <div class="statistics-chart" id="platform-task-statistics-chart"></div>
    <div class="time-dimension-selector">
      <span :class="{active: currentTimeDimension === 'year'}" @click="drawChart('year')">年</span>
      <span :class="{active: currentTimeDimension === 'month'}" @click="drawChart('month')">月</span>
      <span :class="{active: currentTimeDimension === 'week'}" @click="drawChart('week')">周</span>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "taskStatistics"
}
</script>

<style scoped lang="scss">
.component-wrap{
  position: relative;
}
.component-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  .title-text{
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    &:before{
      content: '';
      display: block;
      width: 0.3rem;
      height: 1.2rem;
      background-color: #4b6fd6;
      margin-right: 0.3rem;
    }
  }
}
.statistics-chart{
  background-color: #FFFFFF;
  padding: 0.5rem;
  height: 16rem;
  position: relative;
  z-index: 1;
}

.time-dimension-selector{
  font-size: 0.8rem;
  position: absolute;
  z-index: 2;
  top: 2.2rem;
  right: 5px;
  span{
    display: inline-block;
    width: 2rem;
    height: 1.5rem;
    text-align: center;
    line-height: 1.5rem;
    border: 1px solid #dadada;
    color: #3e3e3e;
    &.active{
      color: #5571dd;
    }
    &:not(:last-child){
      border-right: none;
    }
  }
}
</style>